<template>
  <div class="register">
    <div class="register-box" v-if="!showMsg">
      <div class="title">注册</div>
      <div class="from">
        <el-form
          ref="ruleForm"
          :rules="rules"
          :model="ruleForm"
          label-width="62px"
          autocomplete="off"
          hide-required-asterisk
        >
          <el-form-item label="姓名" prop="userName" class="reg">
            <el-input
              v-model="ruleForm.userName"
              style="width: 380px"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" class="reg">
            <el-input
              v-model="ruleForm.email"
              style="width: 380px"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone" class="reg">
            <el-input
              v-model="ruleForm.phone"
              maxlength="11"
              style="width: 380px"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="reg">
            <el-input
              auto-complete="new-password"
              :type="passwordType"
              v-model="ruleForm.password"
              style="width: 380px"
            ></el-input>
            <div class="openimage" @click="isOpen">
              <img
                class="open"
                :src="passcheck.hide"
                v-show="isicon == true"
                alt=""
              />
              <img
                class="open"
                :src="passcheck.open"
                v-show="isicon == false"
                alt=""
              />
            </div>
          </el-form-item>
          <el-form-item label="验证码" prop="code" class="reg">
            <el-input v-model="ruleForm.code" style="width: 210px"></el-input>
            <el-button
              class="code-btn code"
              :disabled="isDisabled"
              type="primary"
              @click="sendCode"
              >{{ buttonText }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="check">
        <el-checkbox v-model="checked">我同意《注册协议》</el-checkbox>
      </div>
      <div class="registernow-box">
        <el-button class="registernow" @click="getRegister()" type="primary"
          >立即注册</el-button
        >
      </div>
      <div class="register-bottom">
        <span>已有账号？</span>
        <span class="landing" @click="goLogin()">直接登录</span>
      </div>
    </div>
    <Registermsg v-else :phone="ruleForm.phone"></Registermsg>
  </div>
</template>

<script>
import Registermsg from "./components/registermsg.vue";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    Registermsg,
  },
  data() {
    const validateUserPhone = (rule, value, callback) => {
      if (!/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    const validateUserEmail = (rule, value, callback) => {
      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
        callback(new Error("请输入正确的邮箱"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, password, callback) => {
      // 至少8位
      const minLength = 8;
      // 至少一个字母
      const hasLetter = /[a-zA-Z]/;
      // 至少一个数字
      const hasDigit = /[0-9]/;
      // 至少一个特殊字符
      const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/;

      // 检查密码长度
      if (password.length < minLength ||
          !hasLetter.test(password) ||
          !hasDigit.test(password) ||
          !hasSpecialChar.test(password)){
          callback(new Error("密码要求是8位以上，字母、数字、特殊字符组合"));
      }else {
        callback();
      }
    };
    return {
      disabled: 1,
      buttonText: "获取验证码",
      isDisabled: false, // 是否禁止点击发送验证码按钮
      flag: true,
      isicon: true,
      checked: true,
      passwordType: "password",
      showMsg: false,
      ruleForm: {
        phone: "",
        email: "",
        userName: "",
        password: "",
        code: "",
      },
      errmessage: {
        err: false,
        success: false,
        message: "错误",
      },
      passcheck: {
        hide: require("@/assets/images/login/hide.png"),
        open: require("@/assets/images/login/open.png"),
      },
      rules: {
        userName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            required: true,
            trigger: ["blur", "change"],
            validator: validateUserPhone,
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            required: true,
            trigger: ["blur", "change"],
            validator: validateUserEmail,
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
          {
            required: true,
            trigger: ["blur", "change"],
            validator: validatePassword,
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    ...mapActions(["sendSms", "register"]),
    isOpen() {
      this.isicon = !this.isicon;
      if (this.isicon == true) {
        this.passwordType = "password";
      } else {
        this.passwordType = "text";
      }
    },
    getRegister() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            phone: this.ruleForm.phone,
            password: this.ruleForm.password,
            name: this.ruleForm.userName,
            phone_code: this.ruleForm.code,
            email: this.ruleForm.email,
          };
          this.register(data).then((res) => {
            this.showMsg = true;
            this.$refs.ruleForm.resetFields();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    sendCode() {
      this.$refs.ruleForm.validateField("phone", (phoneError) => {
        if (!phoneError) {
          this.sendSms({ mobile: this.ruleForm.phone, type: 1 }).then((res) => {
            this.changeBtnText();
          });
        }
      });
    },
    changeBtnText() {
      let time = 60;
      this.isDisabled = true;
      this.buttonText = "已发送（" + time + " s）";
      let timer = setInterval(() => {
        time--;
        this.buttonText = "已发送（" + time + " s）";
        if (time === 0) {
          clearInterval(timer);
          this.buttonText = "重新获取";
          this.isDisabled = false;
        }
      }, 1000);
    },
    goLogin() {
      this.$router.push({
        name: "login",
      });
    },

  },
};
</script>

<style scoped>
.register {
  width: 100%;
  height: 100vh;
  background-image: url(../../../assets/images/login/login.png);
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  position: relative;
}
.register-box {
  width: 700px;
  padding-bottom: 30px;
  background: #ffffff;
  box-shadow: 0px 5px 12px 0px rgba(3, 3, 3, 0.1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.title {
  width: 55px;
  height: 23px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  line-height: 23px;
  margin: 40px auto;
  letter-spacing: 2px;
}
form {
  margin-left: 130px;
}
.el-input /deep/ .el-input__inner {
  border-left: none;
  border-top: none;
  border-right: none;
  border-radius: 0;
  font-size: 16px;
  height: 35px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  margin-bottom: 25px;
}
.el-form .el-form-item /deep/ .el-form-item__content {
  display: flex;
}
.el-form .el-form-item /deep/ .el-form-item__label {
  font-size: 16px;
  height: 35px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  line-height: 35px;
}
.code {
  width: 140px;
  height: 40px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  text-align: center;
  margin-left: 30px;
  cursor: pointer;
}
.code-btn {
  background: #F1F7FF;
  color: #0B4696;
  border: none;
}
.passbtn {
  background: #f2f2f2;
  color: #999999;
}
.openimage {
  position: relative;
}
.open {
  width: 60px;
  height: 60px;
  position: absolute;
  top: -15px;
  right: 0px;
  cursor: pointer;
}
.check,
.registernow-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
.registernow {
  width: 380px;
  height: 60px;
  background: #0b4696;
  box-shadow: 0px 7px 27px 0px rgba(50, 129, 255, 0.51);
  border-radius: 2px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 2px;
}
.register-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 45px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  letter-spacing: 1px;
}
.landing {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #0e93e4;
  cursor: pointer;
}
.el-form .reg /deep/ .el-form-item__error {
  padding-top: 4px;
  position: absolute;
  top: 0%;
  left: 380px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ff1e1e;
  line-height: 35px;
  margin-left: 10px;
}
.el-icon-warning {
  color: #ff1e1e;
  margin-left: 21px;
  margin-top: 14px;
  width: 14px;
  height: 14px;
}
.el-icon-success {
  color: #23ce30;
  margin-left: 21px;
  margin-top: 14px;
  width: 14px;
  height: 14px;
}
.error {
  color: #ff1e1e;
}
</style>
